<template>
  <div id="app">
    <div>
      <ul class="dataList" @click="addSelected">
        <li
          v-for="(item, index) in backEndData"
          :key="item.id"
          :class="{ selectedLi: selectedList.indexOf(index + 1) >= 0 }"
        >
          <span class="month">{{ item.month }}</span>
          <span class="amount">{{ item.amount }}</span>
          <span class="selected">{{
            selectedList.indexOf(index + 1) >= 0 ? "选中了" : "未选中"
          }}</span>
          "点击这几个字进行选中状态切换"
        </li>
      </ul>
    </div>
    <div>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedList: [],
      backEndData: [
        { id: 1, month: "一月", amount: 1005 },
        { id: 2, month: "二月", amount: 1605 },
        { id: 3, month: "三月", amount: 3005 },
        { id: 4, month: "四月", amount: 2003 },
        { id: 5, month: "五月", amount: 1035 },
        { id: 6, month: "六月", amount: 1205 },
        { id: 7, month: "七月", amount: 1405 },
        { id: 8, month: "八月", amount: 3005 },
      ],
    };
  },
  methods: {
    submit() {
      if (this.selectedList.length > 0) {
        const maxMonth = this.checkMaxMonth(this.selectedList);
        this.checkeSelected(maxMonth);
      } else {
        alert("你什么都没选中，无法提交");
      }
    },
    addSelected(e) {
      let index = this.getIndex(e);
      if (this.selectedList.indexOf(index) >= 0) {
        this.selectedList = this.selectedList.filter((item) => item !== index);
      } else {
        this.selectedList.push(index);
      }
    },
    checkMaxMonth(selectedList) {
      let max = 0;
      for (let i = 0; i < selectedList.length; i++) {
        if (selectedList[i] > max) {
          max = selectedList[i];
        }
      }
      return max;
    },
    getIndex(e) {
      let target = e.target; //事件发生的元素
      let nodeList = e.target.parentNode.children; //同级元素集合
      let index = [...nodeList].indexOf(target) + 1;
      return index;
    },
    checkeSelected(maxMonth) {
      let flag = 0;
      let notSelectedList = [];
      for (let i = 1; i <= maxMonth; i++) {
        if (this.selectedList.indexOf(i) >= 0) {
          flag += 1;
        } else {
          notSelectedList.push(i);
        }
      }
      // console.log(`flag${flag}`);
      // console.log(`maxMonth:${maxMonth}`);
      // console.log(`当前数组${this.selectedList}`);
      if (flag === maxMonth) {
        alert(`成功提交${maxMonth}月之前的数据`);
      } else {
        alert(notSelectedList.toString() + "月的数据没有勾选呀");
      }
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
ul {
  list-style: none;
  border: 1px solid red;
  color: red;
  li {
    border: 1px solid red;
    padding: 10px 0;
  }
  .amount {
    margin-right: 10px;
    color: black;
  }
  .month {
    margin-right: 10px;
    color: black;
  }
  .selected {
    color: black;
  }
  .selectedLi {
    background: gray;
  }
}
button {
  background: black;
  color: white;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 4px;
}
</style>
